import React, { Component } from 'react'
import { Menu, Icon} from 'antd';
import { NavLink } from 'react-router-dom';
import {connect } from 'react-redux';
import { showTitle } from '../../redux/action/index';
import {routerConfig } from '../../routers/routeConfig';
const SubMenu = Menu.SubMenu;
class SiderItem extends Component {
  constructor(props){
    super(props);
    this.state = {
      activeKey:''
    }
  }
  componentWillMount(){
    this.setState({
      activeKey:window.location.pathname
    })
  }
  onMenuItem = ( {item,key} ) =>{
    const { dispatch } = this.props;   
    dispatch(showTitle(item.props.title));
    this.setState({
      activeKey:key
    })
      
  }
  routerMenu = (data) => {
   return  data.map((item,index)=>{
      if (item.children) {
        return (
          <SubMenu
          key={item.key}
          title={<span><Icon type={item.icon} /><span>{item.title}</span></span>}
          >
           {this.routerMenu(item.children)}
          </SubMenu>
        )
      }
      return (
        <Menu.Item key={item.key} title={item.title} >
          <NavLink to={item.key}>{item.icon ? <Icon type={item.icon} /> : null} <span>{item.title}</span></NavLink>
        </Menu.Item>
      )
    })
  }
  render() {
    return (
      <div className="siderItem">
          <Menu theme="dark" selectedKeys={[this.state.activeKey]}  mode="inline" onClick={this.onMenuItem}>
              {this.routerMenu(routerConfig)}
            </Menu>
      </div>
    )
  }
}

export default   connect()(SiderItem)